<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代下单</title>
    <meta http-equiv="Xpassworpassword-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="//cdn.bootcss.com/weui/0.4.3/style/weui.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/0.8.0/css/jquery-weui.min.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link  rel="stylesheet"  href="css/shop-page.css">
</head>
<body class="bgcolor">
<section>
<div class="shop-order-user">
    <div class="shop-user-iteam">
        <lable class="f14">用户姓名</lable>
        <span><input type="text" placeholder="请输入用户姓名"></span>
    </div>
    <div class="shop-user-iteam">
        <lable class="f14">用户手机</lable>
        <span><input type="text" placeholder="请输入手机号"></span>
    </div>
</div>
<div class="car-select-pai">
    <div class="car-sheng">
        <div class="car-sheng-l">车牌号</div>
        <div class="car-sheng-r">
            <span>
                <i class="f16" id="addCarprvinceText">浙</i><img src="image/xia-more.png">
            </span>
        </div>
    </div>
    <div class="car-zimu f14">
        <span>
            <i class="pl5" id="addCarAlphabetText">A</i><img src="image/xia-more.png">
        </span>
    </div>
    <div class="car-number graycolor f14 pl5"><i class="pl5" id="addcarnumber">请输入车牌号</i></div>
</div>
<div class="car-select-type">
    <div class="car-xi-l f14">车品牌</div>
    <div class="car-xi-r">
        <span class="pr5 f14" id="selectCarTypeText">请填写车辆品牌</span><img src="image/more.png" class="car-xi-imgsty">
    </div>
</div>
<p style="font-size: 12px; color: #959595; padding: 15px "> * 车辆信息必填，预约时间请确认</p>

<!--省会简称选择页面-->
<div class="car-province-box" style="display: none">
    <ul>
        <li>京</li>
        <li>津</li>
        <li>冀</li>
        <li>晋</li>
        <li>蒙</li>
        <li>辽</li>
        <li>吉</li>
        <li>黑</li>
        <li>沪</li>
        <li>苏</li>
        <li>浙</li>
        <li>皖</li>
        <li>闽</li>
        <li>赣</li>
        <li>鲁</li>
        <li>豫</li>
        <li>鄂</li>
        <li>湘</li>
        <li>粤</li>
        <li>桂</li>
        <li>琼</li>
        <li>川</li>
        <li>贵</li>
        <li>云</li>
        <li>渝</li>
        <li>藏</li>
        <li>陕</li>
        <li>甘</li>
        <li>青</li>
        <li>宁</li>
        <li>新</li>
    </ul>
    <div style="clear: both;"></div>
</div>

<!--字母选择页面-->
<div class="car-province-alphabet" style="display: none">
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>J</li>
        <li>H</li>
        <li>I</li>
        <li>J</li>
        <li>K</li>
        <li>L</li>
        <li>M</li>
        <li>N</li>
        <li>O</li>
        <li>P</li>
        <li>Q</li>
        <li>R</li>
        <li>S</li>
        <li>T</li>
        <li>U</li>
        <li>V</li>
        <li>W</li>
        <li>X</li>
        <li>Y</li>
        <li>Z</li>
    </ul>
    <div style="clear: both;"></div>
</div>

<!--车牌号填写-->
<div class="car-number-keyboard" style="display: none">
<button>完成</button>
<div style="clear: both"></div>
<ul class="chinese-keyboard">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>0</li>
</ul>
<ul class="english-keyboard">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>J</li>
    <li>H</li>
    <li>I</li>
    <li>J</li>
    <li>K</li>
    <li>L</li>
    <li>M</li>
    <li>N</li>
    <li>O</li>
    <li>P</li>
    <li>Q</li>
    <li>R</li>
    <li>S</li>
    <li>T</li>
    <li>U</li>
    <li>V</li>
    <li>W</li>
    <li>X</li>
    <li>Y</li>
    <li>Z</li>
</ul>
    <div style="clear: both;"></div>
</div>

<div class="place-an-order">
    <span class="f16" id="ToOrder">立即下单</span>
</div>
</section>
<!--选择车品牌-->
<div class="choose-carbrand" style="display: none">
    <div id="letter" ></div>
    <div class="sort_box">
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">奥迪</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">AC Schnitzer</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">Artega</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">奔驰</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">宝马</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">保时捷</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">宝沃</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">巴博斯</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">大众</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">卡尔森</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">阿尔特</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">本田</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">丰田</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">雷克萨斯</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">铃木</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">朗世</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">马自达</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">讴歌</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">日产</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">三菱</div>
        </div>

        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">斯巴鲁</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">别克</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">道奇</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">福特</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">GMC</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">凯迪拉克</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">Jeep</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">雪佛兰</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">特斯拉</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">林肯</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">++</div>
        </div>
    </div>
    <div class="initials">
        <ul>

        </ul>
    </div>
</div>

</body>
<script type="text/javascript" src="config/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script src="config/jquery.charfirst.pinyin.js"></script>
<script src="js/sort.js"></script>
<script>
    $(function () {
//代下单
        $("#ToOrder").click(function () {
            var shengword = $('.car-sheng-r i').html();
            var englishword = $('.car-zimu i').html();
            var carnumberword = $('.car-number i').html();
            var carbrandword = $('.car-xi-r #selectCarTypeText').html();

            window.location.href = "OrderList.html"; //跳转至订单列表
        });

//选择省会简称
        $('.car-sheng-r').click(function () {
            $('.car-province-alphabet').hide();//隐藏字母选择框
            $('.car-number-keyboard').hide();//隐藏车牌号码选择框
            $('.choose-carbrand').hide();//隐藏车品牌选择框
            $('.car-province-box').show();//显示省会简称选择框
        });
        $('.car-province-box ul li').click(function () {
            $('#addCarprvinceText').html($(this).html());
            $('.car-province-box').hide();//隐藏省会简称选择框
        });

//选择字母
        $('.car-zimu').click(function () {
            $('.car-number-keyboard').hide();//隐藏车牌号码选择框
            $('.choose-carbrand').hide();//隐藏车品牌选择框
            $('.car-province-box').hide();//隐藏省会简称选择框
            $('.car-province-alphabet').show();//显示字母选择框
        });
        $('.car-province-alphabet ul li').click(function () {

            $('#addCarAlphabetText').html($(this).html());
            $('.car-province-alphabet').hide();//隐藏字母选择框
        });

//填写车牌号
        $('.car-number').click(function () {
            $('.choose-carbrand').hide();//隐藏车品牌选择框
            $('.car-province-box').hide();//隐藏省会简称选择框
            $('.car-province-alphabet').hide();//隐藏字母选择框
            $('#addcarnumber').html('');
            $('.car-number-keyboard').show();//显示车牌号码选择框
        });
        $('.car-number-keyboard ul li').click(function () {
            var oldnumber = $('#addcarnumber').html();
            $('#addcarnumber').html(oldnumber + $(this).html()).css({'color':'#343434'});
        });
        $(".car-number-keyboard button").click(function () {
            $('.car-number-keyboard').hide();//字母选择列表隐藏
        });

//选择车品牌
        $('.car-xi-r').click(function () {
            $('section').hide();
            $('.car-province-box').hide();//隐藏省会简称选择框
            $('.car-province-alphabet').hide();//隐藏字母选择框
            $('.car-number-keyboard').hide();//隐藏车牌号码选择框
            $('.choose-carbrand').show();//显示车品牌选择框
        });
        $('.sort_list').click(function () {
            var carbrand = $(this).children('.num_name').html();
            $('.car-xi-r span').html(carbrand).css({'color':'#343434'});//将选中的品牌填入输入框
            $('.choose-carbrand').hide();//车牌号选择框隐藏
            $('section').show();
        });

    });

</script>
</html>